 <template>
 	<view class="container">
 		<!-- 自定义导航栏 -->
 		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
 			<view class="nav-back" @click="goBack">
 				<text class="back-icon">‹</text>
 			</view>
 			<view class="nav-title">确认订单</view>
 		</view>

 		<!-- 进度指示器 -->
 		<view class="progress-bar">
 			<view class="progress-step" :class="{ active: step >= 1 }">
 				<view class="step-circle">预约服务</view>
 			</view>
 			<view class="progress-line"></view>
 			<view class="progress-step" :class="{ active: step >= 2 }">
 				<view class="step-circle">支付订单</view>
 			</view>
 			<view class="progress-line"></view>
 			<view class="progress-step" :class="{ active: step >= 3 }">
 				<view class="step-circle">门店服务</view>
 			</view>
 		</view>

 		<scroll-view scroll-y class="content-scroll">
 			<!-- 订单信息卡片 -->
 			<view class="order-card">
 				<!-- 店铺信息 -->
 				<view class="info-row">
 					<text class="info-icon">🏪</text>
 					<view class="info-content">
 						<view class="info-title">{{ orderInfo.shopName }}</view>
 						<view class="info-subtitle">{{ orderInfo.shopAddress }}</view>
 					</view>
 				</view>

 				<!-- 用户信息 -->
 				<view class="info-row">
 					<text class="info-icon">👤</text>
 					<view class="info-content">
 						<text class="info-title">{{ orderInfo.userName }}</text>
 					</view>
 					<text class="info-phone">{{ orderInfo.userPhone }}</text>
 				</view>

 				<!-- 车辆信息 -->
 				<view class="info-row" @click="selectVehicle">
 					<text class="info-icon">🚗</text>
 					<view class="info-content">
 						<text class="info-title">{{ orderInfo.vehicle }}</text>
 					</view>
 					<text class="info-arrow">›</text>
 				</view>

 				<!-- 服务产品 -->
 				<view class="info-row">
 					<view class="info-content">
 						<text class="info-label">服务产品</text>
 					</view>
 					<text class="info-link">共选择1项服务产品</text>
 				</view>
 				<view class="service-row">
 					<text class="service-name">{{ orderInfo.serviceName }}</text>
 					<text class="service-price">¥{{ orderInfo.servicePrice }}</text>
 				</view>

 				<!-- 优惠券 -->
 				<view class="info-row" @click="selectCoupon">
 					<text class="info-icon">💰</text>
 					<view class="info-content">
 						<text class="info-title">代金券/优惠券</text>
 					</view>
 					<text class="discount-amount">-{{couponDiscount}}元</text>
 					<text class="info-arrow">›</text>
 				</view>
 			</view>
 		</scroll-view>

 		<!-- 底部操作栏 -->
 		<view class="bottom-bar">
 			<view class="contact-service" @click="showPhoneModal">
 				<text class="service-icon">🎧</text>
 				<text>联系客服</text>
 			</view>
 			<view class="total-price">
 				<text>合计: </text>
 				<text class="price-amount">¥{{ totalPrice }}</text>
 			</view>
 			<view class="submit-btn" @click="showPaymentModal">提交订单</view>
 		</view>

 		<!-- 支付密码弹窗 -->
 		<view class="payment-modal" v-if="showPayment" @click="hidePaymentModal">
 			<view class="modal-content" @click.stop>
 				<view class="modal-close" @click="hidePaymentModal">✕</view>
 				<view class="modal-title">请输入支付密码</view>
 				<view class="modal-subtitle">车辆服务平台</view>

 				<view class="modal-amount">¥ {{ totalPrice }}</view>

 				<!-- 密码输入框 -->
 				<view class="payment-method">
 					<text class="method-label">支付方式 <text class="change-method">零钱 ></text></text>

 					<view class="password-inputs">
 						<input class="password-input" type="text" maxlength="1" v-for="(item, index) in 6" :key="index"
 							v-model="password[index]" readonly :ref="`passwordInput${index}`" />
 					</view>
 				</view>

 				<!-- 九宫格数字键盘 -->
 				<view class="number-keyboard">
 					<view class="key-row">
 						<view class="key-btn" @click="handleKeyPress(1)">1</view>
 						<view class="key-btn" @click="handleKeyPress(2)">2</view>
 						<view class="key-btn" @click="handleKeyPress(3)">3</view>
 					</view>
 					<view class="key-row">
 						<view class="key-btn" @click="handleKeyPress(4)">4</view>
 						<view class="key-btn" @click="handleKeyPress(5)">5</view>
 						<view class="key-btn" @click="handleKeyPress(6)">6</view>
 					</view>
 					<view class="key-row">
 						<view class="key-btn" @click="handleKeyPress(7)">7</view>
 						<view class="key-btn" @click="handleKeyPress(8)">8</view>
 						<view class="key-btn" @click="handleKeyPress(9)">9</view>
 					</view>
 					<view class="key-row">
 						<view class="key-btn empty"></view>
 						<view class="key-btn" @click="handleKeyPress(0)">0</view>
 						<view class="key-btn delete" @click="handleDelete">⌫</view>
 					</view>
 				</view>
 			</view>
 		</view>

 		<!-- 拨号弹窗 -->
 		<view class="phone-modal" v-if="showPhone" @click="hidePhoneModal">
 			<view class="modal-content" @click.stop>
 				<view class="phone-number">{{ orderInfo.userPhone }}</view>
 				<view class="modal-btn" @click="copyPhone">复制</view>
 				<view class="modal-btn cancel" @click="hidePhoneModal">取消拨号</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				statusBarHeight: 0,
 				step: 2,
 				showPayment: false,
 				showPhone: false,
 				password: ['', '', '', '', '', ''],
 				orderInfo: {
 					shopName: '伟业汽车美容店 (人民路店)',
 					shopAddress: '山阳区人民中路33号',
 					userName: '张先生',
 					userPhone: '18656894566',
 					vehicle: '奔驰FWE4/豫A56487',
 					serviceName: '精洗汽车',
 					servicePrice: 39.9
 				},
 				couponDiscount: 10
 			};
 		},
 		computed: {
 			totalPrice() {
 				// 计算实际支付金额：服务价格 - 优惠券折扣
 				return (this.orderInfo.servicePrice - this.couponDiscount).toFixed(1);
 			}
 		},
 		onLoad() {
 			const systemInfo = uni.getSystemInfoSync();
 			this.statusBarHeight = systemInfo.statusBarHeight;
 		},
 		methods: {
 			goBack() {
 				uni.navigateBack();
 			},
 			selectVehicle() {
 				uni.navigateTo({
 					url: '/pages/index/washCar/chooseCar/chooseCar'
 				});
 			},
 			selectCoupon() {
 				uni.navigateTo({
 					url: '/pages/index/washCar/coupon/coupon'
 				});
 			},
 			showPaymentModal() {
 				this.showPayment = true;
 				this.password = ['', '', '', '', '', '']; // 重置密码
 			},
 			hidePaymentModal() {
 				this.showPayment = false;
 				this.password = ['', '', '', '', '', ''];
 			},
 			// 处理九宫格数字点击
 			handleKeyPress(number) {
 				// 找到第一个空位置
 				const emptyIndex = this.password.findIndex(item => item === '');
 				if (emptyIndex !== -1) {
 					this.password[emptyIndex] = number.toString();
 					// 自动聚焦到下一个输入框（视觉反馈）
 					if (emptyIndex < 5) {
 						this.$nextTick(() => {
 							const nextInput = this.$refs[`passwordInput${emptyIndex + 1}`];
 							if (nextInput && nextInput[0]) {
 								nextInput[0].focus();
 							}
 						});
 					}
 					// 检查是否输入完成
 					if (this.password.every(p => p)) {
 						this.submitPayment();
 					}
 				}
 			},
 			// 修复：替换findLastIndex方法，手动循环查找最后一个非空位置
 			handleDelete() {
 				let lastIndex = -1;
 				// 从后往前循环，找到第一个非空的密码索引
 				for (let i = this.password.length - 1; i >= 0; i--) {
 					if (this.password[i] !== '') {
 						lastIndex = i;
 						break;
 					}
 				}
 				if (lastIndex !== -1) {
 					this.password[lastIndex] = '';
 					// 聚焦到当前位置
 					this.$nextTick(() => {
 						const currentInput = this.$refs[`passwordInput${lastIndex}`];
 						if (currentInput && currentInput[0]) {
 							currentInput[0].focus();
 						}
 					});
 				}
 			},
 			submitPayment() {
 				// 验证密码并提交支付（实际项目中需对接真实支付接口）
 				setTimeout(() => {
 					uni.showToast({
 						title: '支付成功'
 					})
 					this.hidePaymentModal();
 					uni.navigateTo({
 						url: `/pages/index/washCar/orderSuccess/orderSuccess?amount=${this.totalPrice}`
 					});
 				}, 500);
 			},
 			showPhoneModal() {
 				this.showPhone = true;
 			},
 			hidePhoneModal() {
 				this.showPhone = false;
 			},
 			copyPhone() {
 				uni.setClipboardData({
 					data: this.orderInfo.userPhone,
 					success: () => {
 						uni.showToast({
 							title: '已复制'
 						});
 					}
 				});
 			}
 		}
 	};
 </script>

 <style scoped>
 	/* 样式部分与之前一致，无需修改 */
 	.container {
 		width: 100%;
 		height: 100vh;
 		background-color: #F5F7FA;
 		display: flex;
 		flex-direction: column;
 	}

 	.custom-nav {
 		height: 44px;
 		display: flex;
 		align-items: center;
 		background-color: #4A90E2;
 		position: relative;
 	}

 	.nav-back {
 		width: 44px;
 		height: 44px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.back-icon {
 		color: white;
 		font-size: 32px;
 		font-weight: bold;
 		line-height: 44px;
 	}

 	.nav-title {
 		flex: 1;
 		text-align: center;
 		color: white;
 		font-size: 18px;
 		font-weight: 500;
 	}

 	.progress-bar {
 		background-color: #5BA3F5;
 		padding: 15px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.progress-step {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}

 	.step-circle {
 		width: 60px;
 		height: 60px;
 		border-radius: 30px;
 		background-color: #4A90E2;
 		color: white;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 12px;
 		text-align: center;
 	}

 	.progress-step.active .step-circle {
 		background-color: #4CD964;
 	}

 	.progress-line {
 		width: 60px;
 		height: 2px;
 		background-color: rgba(255, 255, 255, 0.3);
 		margin: 0 10px;
 		border-style: dashed;
 	}

 	.content-scroll {
 		flex: 1;
 		padding: 10px;
 	}

 	.order-card {
 		background-color: white;
 		border-radius: 10px;
 		padding: 15px;
 	}

 	.info-row {
 		display: flex;
 		align-items: center;
 		padding: 12px 0;
 		border-bottom: 1px solid #F5F7FA;
 	}

 	.info-row:last-child {
 		border-bottom: none;
 	}

 	.info-icon {
 		font-size: 20px;
 		margin-right: 10px;
 		color: #4A90E2;
 	}

 	.info-content {
 		flex: 1;
 	}

 	.info-title {
 		font-size: 16px;
 		color: #333;
 	}

 	.info-subtitle {
 		font-size: 12px;
 		color: #999;
 		margin-top: 5px;
 	}

 	.info-label {
 		font-size: 16px;
 		font-weight: bold;
 		color: #333;
 	}

 	.info-phone {
 		font-size: 14px;
 		color: #666;
 	}

 	.info-arrow {
 		font-size: 24px;
 		color: #4A90E2;
 		margin-left: 10px;
 	}

 	.info-link {
 		font-size: 14px;
 		color: #4A90E2;
 		text-decoration: underline;
 	}

 	.service-row {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding: 10px 0;
 		margin-left: 30px;
 	}

 	.service-name {
 		font-size: 14px;
 		color: #666;
 	}

 	.service-price {
 		font-size: 16px;
 		color: #FF4444;
 		font-weight: bold;
 	}

 	.discount-amount {
 		font-size: 14px;
 		color: #FF4444;
 		margin-right: 10px;
 	}

 	.bottom-bar {
 		position: fixed;
 		bottom: 0;
 		left: 0;
 		right: 0;
 		height: 60px;
 		background-color: #F5F7FA;
 		display: flex;
 		align-items: center;
 		padding: 0 15px;
 		border-top: 1px solid #E0E0E0;
 	}

 	.contact-service {
 		display: flex;
 		align-items: center;
 		font-size: 14px;
 		color: #666;
 		margin-right: 15px;
 	}

 	.service-icon {
 		font-size: 18px;
 		margin-right: 5px;
 		color: #4A90E2;
 	}

 	.total-price {
 		flex: 1;
 		text-align: center;
 		font-size: 14px;
 		color: #666;
 	}

 	.price-amount {
 		color: #FF4444;
 		font-weight: bold;
 		font-size: 18px;
 	}

 	.submit-btn {
 		width: 100px;
 		height: 40px;
 		background-color: #4A90E2;
 		color: white;
 		border-radius: 20px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 16px;
 		font-weight: 500;
 	}

 	.payment-modal {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background-color: rgba(0, 0, 0, 0.5);
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		z-index: 999;
 	}

 	.modal-content {
 		width: 80%;
 		background-color: white;
 		border-radius: 15px;
 		padding: 20px;
 		position: relative;
 		max-width: 400px;
 	}

 	.modal-close {
 		position: absolute;
 		top: 15px;
 		left: 15px;
 		font-size: 20px;
 		color: #666;
 	}

 	.modal-title {
 		text-align: center;
 		font-size: 18px;
 		color: #333;
 		margin-top: 10px;
 		margin-bottom: 5px;
 	}

 	.modal-subtitle {
 		text-align: center;
 		font-size: 12px;
 		color: #999;
 		margin-bottom: 20px;
 	}

 	.modal-amount {
 		text-align: center;
 		font-size: 32px;
 		font-weight: bold;
 		color: #333;
 		margin-bottom: 20px;
 	}

 	.payment-method {
 		margin-top: 20px;
 	}

 	.method-label {
 		font-size: 12px;
 		color: #999;
 		display: block;
 		margin-bottom: 10px;
 	}

 	.password-inputs {
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 30px;
 		padding: 0 10px;
 	}

 	.password-input {
 		width: 45px;
 		height: 45px;
 		border: 1px solid #E0E0E0;
 		border-radius: 5px;
 		text-align: center;
 		font-size: 24px;
 		/* 密码显示样式 */
 		-webkit-text-security: disc;
 		text-security: disc;
 	}

 	.change-method {
 		font-size: 12px;
 		color: #999;
 		float: right;
 	}

 	/* 九宫格数字键盘样式 */
 	.number-keyboard {
 		width: 100%;
 		margin-top: 20px;
 	}

 	.key-row {
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 10px;
 	}

 	.key-btn {
 		width: 30%;
 		height: 50px;
 		background-color: #F5F7FA;
 		border-radius: 8px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-size: 20px;
 		font-weight: bold;
 		color: #333;
 		touch-action: manipulation;
 	}

 	.key-btn:active {
 		background-color: #E0E0E0;
 	}

 	.key-btn.empty {
 		background-color: transparent;
 	}

 	.key-btn.delete {
 		color: #666;
 		font-size: 24px;
 	}

 	.phone-modal {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		bottom: 0;
 		background-color: rgba(0, 0, 0, 0.5);
 		display: flex;
 		align-items: flex-end;
 		z-index: 999;
 	}

 	.phone-modal .modal-content {
 		width: 100%;
 		border-radius: 15px 15px 0 0;
 	}

 	.phone-number {
 		text-align: center;
 		font-size: 18px;
 		color: #333;
 		margin-bottom: 15px;
 	}

 	.modal-btn {
 		height: 45px;
 		line-height: 45px;
 		text-align: center;
 		background-color: #4A90E2;
 		color: white;
 		border-radius: 8px;
 		margin-bottom: 10px;
 		font-size: 16px;
 	}

 	.modal-btn.cancel {
 		background-color: #F5F7FA;
 		color: #666;
 		margin-bottom: 0;
 	}
 </style>